We trust you liked your first taste of the good stuff. Now let’s beef it up and go over some practical responsive design examples and layout constructs.
A header or footer bar that stretches across the full page width at any screen size, but with centered content, adds a nice touch to a responsive design. This can be easily accomplished by removing the max-width constraint for the row element and applying a background color or image for a nice visual effect. To center the content on the page, a container element or subgrid, has to be dropped into a single column that spans the full grid width (12 columns in this case).
Using a subgrid allows for more responsive flexibility at a smaller screen size and is what was used in the example below. The subgrid can be centered by selecting it and checking the ‘auto’ boxes below the Margin control. With the subgrid centered it’s just a matter of adding content elements to the subgrid columns and the width to accommodate for the different display sizes. In the example below we applied a lighter grey background to the subgrid to emphasize the centered position.
The logo element is placed in the 1st subgrid column. The ‘hanging’ effect is created with a 15px negative bottom margin. At the 3rd breakpoint (from right to left), the span value for these subgrid columns is changed from 2 to 12. Now the column takes up the full available width in the subgrid row, pushing the other columns down. The logo is centered by setting the left and right margin to auto and selecting the ‘block’ display property. The navigation buttons are positioned next to each other by changing the display property to ‘inline-block’. After that it is just a matter of adjusting margins, paddings and other sizes until they look good. At the 5th breakpoint, their width is changed to 41% so only 2 elements fit next to each other. At the last breakpoint, they are instructed to take up 100% of the available space with the alignment set to center.
Cool right? Now how did we get the social buttons in the top-right corner for medium to small screens? There are only 2 main ingredients to this trick: (1.) switching the column order for large screen, but visually positioning them as before using the Push & Pull control; and (2.) applying a negative margin. Without the push & pull construct, the social buttons column would have been positioned at the bottom, pretty far from the intended location. Now they can be easily pulled up with the 2nd ingredient, a negative margin. Don’t worry if all this sounds intimidating, just a few tries and you will get the hang of it. Also, at the bottom of this page you can find links to articles and additional templates that explain this, and other layout constructs in detail.
On many sites, this is one of the most important sections. Here the core message or product of the company is communicated with just a few lines of text and an appealing graphic. Below is a demo of such section that is nice and spacy at a 1400px width, but is responsive all the way. Can you imagine hand-coding this design? Exactly! With Layout Maker, we are only using 3 new design constructs: (1.) there are 2 columns each with a subgrid; (2.) floats are used to position the text elements close to the images; (3.) we hide the button after the 3rd breakpoint and make another button appear at the bottom of the section. To place the left subgrid towards the center of the page, only select the left margin check box for the left subgrid. The right subgrid works the other way around.
To get a feeling for the ‘floats’ select for example the ‘AND MAKE’ element and toggle the float control. Other, more advanced uses of this property can be found in other templates (link at the bottom of this page). For the hide and show, go to the Layout Pane and check the ’Show Hidden Items’ box. Now all hidden items are visible (note: this does temporarily influence the layout). If you’re in wide screen view, you will see a big button at the bottom of the section. With the checkbox unchecked, and in the browser, this button only appears on screens smaller than 731px. That is also where the other button disappears. This is a layout construct that should be used sparsely and only for lighter or smaller page elements.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent
Sidebars are very common in static 'fixed-width' designs. They often complement the main content by providing additional information or offer a way to navigate to other content. On many sites (part of) the sidebar is reserved for ads and instrumental for the financial viability of the site. What to do with such an important section in a responsive layout design? On smaller screens, the sidebar will be reduced to minimal proportions; the advertisers would certainly not like that. The best strategy is to alternate between the main content and sidebar sections. The demo below shows how this can be done. The row contains 2 columns, 1 for the main content and 1 for the sidebar.
Inside each column, the content is organized with a subgrid. At the 1st breakpoint, the sidebar gets a little more width. This prevents the ads from getting too small. The main content, with a little less room (width) when the links and social buttons are pushed below the image and text. At the 2nd breakpoint, the sidebar is placed below the main content. If you would like to see how this works for a longer page simply select the row and duplicate it. Also note that that the sidebar only uses one row. The position of the ads is managed with only the span control. Simple but effective!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta.
Responsive design is still young but has already changed the game throughout the industry. Designing static graphical mockups for every breakpoint rapidly proved to be impractical, or even impossible. As a result, browser-based wireframing, already discussed by web pioneers as early as 2008, finally started materializing. This workflow, however, relies on hand-coding skills, which can make the process tedious and potentially hinder creativity.
As static websites are phased out and are being replaced with responsive designs, the majority of the visual web development apps have become obsolete. In a nutshell, any app without a slider or custom breakpoints won't get a high-quality job done. Our latest creations already posses these powers and we will have more good stuff coming you're way soon. Scroll down for an overview of apps and other things design or responsive that we came to value.
Responsive Buttons? Well yes, buttons especially should adapt to the situation! This app crafts fancy CSS buttons that can do exactly that. A button that's ginormous and text heavy on wide screens, but subtle and icon only on small screens? Consider it done — if you download BB that is...
Developing responsive navigation can be daunting, but not with this app! Simply use a set of intuitive controls and get creative with HTML & CSS3 menus that swap, stack, and shrink. Use the slider to view the design at any display size and add breakpoints for ultimate usability under any circumstance.
You’re in it, do we need to say more?
It is gonna happen and it will be awesome. Get pumped up already!
It’s 2010. Ethan lays down the principles of responsive web design in an easy to follow article. About 3 years before RWD goes mainstream!
The content should drive the design process and determine layout constructs. It’s the content and message that matter most. We could not agree more.
Clear, easy to use navigation is key to any successful website. Brad lists a number of techniques for handling this in responsive designs.
The use of a grid (system) is important for creating designs that display consistently and orderly across pages and devices.
Stop pretending that images are websites. Mockup and wireframe designs in the browser instead. That’s right, with or without RLM...
Not sure how high going responsive should rank on your priority list? Quickly look at these numbers and get on with it!
Position, resizing, performance, there’s a whole lot to say about this, and we’re itching to write it down. If there would just be a bit more time in the day...
More and more email is opened and read on mobile devices. Anyone interested in an Email Design & Editor app with a slider?
